<template>
  <ul class="infinite-list"  style="overflow:auto">
    <li v-for="item in this.note" v-on:click="getnote($event)" class="infinite-list-item">
      <div class="content">
        <h5 id="title" v-model="title">{{item.name}}</h5>
        <ul class="tool-bar">
          <li class="iconfont icon-xing"></li>
          <li class="iconfontnew icon-fenxiang"></li>
          <li class="iconfont icon-huishouzhan"></li>
        </ul>
        <p v-html="detail" class="above"></p>
        <span id="date" v-model="date">时间</span>
      </div>
    </li>
  </ul>
</template>

<script>
  import bus from '../../../assets/bus'
    export default {
        name: "newest",
      data(){
          return{
            detail:"梗概",
            title:"",
            count:10,
              date:"时间",
              editor: {
                  info: "",
              },
              note:[],
          }
      },
        methods:{
          getnote(e){
              console.log( e.currentTarget.firstElementChild.firstElementChild.textContent)//获取标题
              console.log(e.currentTarget.firstElementChild.lastElementChild.previousElementSibling.textContent)// 获取梗概
              console.log(e.currentTarget.firstElementChild.lastElementChild.textContent)//获取日期
              //这里进行了一次dom排他操作，但是当数据量过大时并不适用
             var list=e.currentTarget.parentElement.children//获取列表元素放入一个集合
              for(var i=0;i<list.length;i++){
                  list[i].style.background="#FFFFFF";//遍历每个元素将其背景元素设为白色
              }
              e.currentTarget.style.background="#eaf0fb";//将目前选中的元素背景设为选中色
          }
        },
        mounted() {
            var _this=this;
            this.$axios.get('/note/queryValid', {
                credentials: true,
                params: {
                }
            }).then(function (response) {
                  console.log(response)
                _this.count=response.data.data.data.length;
                  _this.note=response.data.data.data;
                  console.log(_this.note)
                })
                .catch(function (error) {
                    console.log(error);
                });
            //接收从wangeditor组件传输来的组件
            bus.$on('getinfo',(e)=>{
                _this.editor.info=e;
            })
        }
    }
</script>

<style scoped>
  .infinite-list{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: block;
  }
  .infinite-list-item{
    display: inline-block;
    height: 125px;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .infinite-list-item h5{
    float: left;
    display: inline-block;
    width: 60%;
    font-size: 15px;
    height: 23px;
    text-align: left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis !important;
  }
  .infinite-list-item p{
    font-size: 5px;
    overflow:hidden;
    /*超出范围用省略号表示*/
    text-overflow:ellipsis !important;
    font-size: 14px;
    line-height: 25px;
    width: 100%;
    height: 50px;
    text-align: left;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    /*显示行数为2*/
    -webkit-line-clamp:2;
  }
  .infinite-list-item .content #date{
    background: palevioletred;
    height: 15px;
    float: left;
    width: 50%;
    margin-top: 15px;
    display: inline-block;
  }
  .infinite-list-item .content{
    height: 100%;
    width: 100%;
    padding: 15px 20px;
    box-sizing: border-box;
  }
  .infinite-list li :hover{
    background: #eaf0fb !important;
  }

  .infinite-list li :hover .tool-bar{
    display: inline-block;
    cursor: pointer;
  }
  .tool-bar{
    /*width: 50px;*/
    /*height: 15px;*/
    /*display: none;*/
    float: right;
    display: none;
  }
  .tool-bar li{
    float: left;
    margin-right: 10px;
    font-size: 20px;
    position: relative;
  }
</style>
